<extend name="Base/common" />
<block name="body">
    <div class="banner">
        <img class="banner-bg-next">
        <img class="banner-bg" src="{$data.videos.0.thumb_large}" alt="">
        <!--<div class="banner-mark"></div> -->
        <div class="banner-video wrapper wrapper-lg">
            <div class="vedio-play fl">
                <volist name="data.videos" id="vo">
                    <div class="jp-jplayer" data-width="880" data-rool="indexPlayer-{$vo.id}" data-height="495" data-src="{$vo.uri}"></div>
                </volist>
            </div>
            <ul class="float-ul video-item-img js-index-tab fr">
                <volist name="data.videos" id="vo">
                    <li <if condition="$key eq 0">class="active"</if> data-src="{$vo.uri}" data-poster="{$vo.thumb_large}">
                        <div class="video-item-list">
                            <div class="cover vedio-cover-img fl">
                                <img class="lazy-img" data-src="{$vo.thumb}" alt="{$vo.title}">
                            </div>
                            <div class="video-item-text fr">
                                <h3>{$vo.title}</h3>
                                <span>游戏：{$vo.game}</span>
                            </div>
                        </div>
                    </li>
                </volist>
            </ul>
        </div>
    </div>
    <div class="wrapper wrapper-lg">
        <div class="box padd padd-b15 mar-tb">
            <div class="toggle-con">
                <h3 class="v-align mar-b20"><if condition="count($data['games']) gt 6"><a href="javascript:void(0)" class="more fr v-align toggle-click"><span>更多</span><span>收起</span><i class="icon icon-list-arrow-up"></i></a></if><i class="icon icon-game mar-r10"></i><a href="{:U('Game/index')}"> 游戏分类</a></h3>
                <ul class="game-cate-group toggle-ul float-ul mar-10lr ul-col-6">
                    <volist name="data.games" id="vo">
                        <li>
                            <a href="{:U('Game/videos?id='.$vo['id'])}" title="{$vo.name}">
                                <div class="t-align">
                                    <div class="cover game-cate-cover format-cover">
                                        <img class="lazy-img" data-src="{$vo.cover}" alt="{$vo.name}">
                                        <span class="keep"></span>
                                        <p class="padd-t10 ">{$vo.name}</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
            <div class="toggle-con">
                <div class="bor-bott"></div>
                <h3 class="v-align mar-t15 mar-b10"><if condition="count($data['match']) gt 6"><a href="javascript:void(0)" class="more fr v-align toggle-click"><span>更多</span><span>收起</span><i class="icon icon-list-arrow-up"></i></a></if><i class="icon icon-score mar-r10"></i><a href="{:U('Match/index')}">赛事分类</a></h3>
                <ul class="toggle-ul match-ul float-ul mar-5lr ul-col-6">
                    <volist name="data.match" id="mt">
                        <li>
                            <a href="{:U('Match/items?id='.$mt['id'])}" title="{$mt.title}">
                                <div class="hover-shadow">
                                    <div class="cover match-cate-cover format-cover">
                                        <img class="lazy-img" data-src="{$mt.cover|default=" default.jpg "}" alt="{$mt.title}">
                                        <span class="keep"></span>
                                        <p class="padd-t10">{$mt.title}</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
        <!--比赛 -->
        <div class="box-match mar-tb">
            <ul class="item-list float-ul mar-t10">
                <volist name="data.races" id="item">
                    <li>
                        <switch name="item.match_state">
                            <case value="2"> <span class="match-live">直播 </span></case>
                            <case value="1"> <span class="match-trailer">预告 </span></case>
                            <default/> <span class="match-default">赛事</span>
                        </switch>
                        <a href="{:U('Match/detail?id='.$item['race']['id'])}">
                            <div class="hover-shadow">
                                <div class="cover match-cover break-cover ">
                                    <div class="padd padd-lr15 clear">
                                        <div class="corps-name fl">
                                            <div class="teem-cover format-cover">
                                                <img class="lazy-img" data-src="{$item.race.team.0.logo|default='__ROOT__/Public/Home/images/d-cover.jpg'}" alt="{$item.race.team.0.name}">
                                            </div>
                                            <p>{$item.race.team.0.name}</p>
                                        </div>
                                        <div class="corps-auto fl">
                                            <div class="corps-middle">
                                                <span class="btn btn-primary overflow-title"><span>{$item.race.match_time|date="Y-m-d",###} {$item.race.title}</span></span>
                                                <h1><eq name="item.match_state" value="1">{$item.race.match_hour}<else/>{$item.race.score.0}  -  {$item.race.score.1}</eq></h1>
                                            </div>
                                        </div>
                                        <div class="corps-name fl">
                                            <div class="teem-cover format-cover">
                                                <img class="lazy-img" data-src="{$item.race.team.1.logo|default='__ROOT__/Public/Home/images/d-cover.jpg'}" alt="{$item.race.team.1.name}">
                                            </div>
                                            <p>{$item.race.team.1.name}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                </volist>
            </ul>
        </div>
        <div class="ajaxHtml" data-url="{:U('Index/getCate')}">
            <div class="loading"></div>
        </div>
    </div>
</block>
<block name="script">
 <script type="text/javascript">
    $(function() {
        var mainPlayer=[];
        var index_inter;
        var mainIndex;
        var videoSlide = {
            index: 0,
            next: function() {
                videoSlide.index++;
                videoSlide.slideTo(videoSlide.index);
            },
            slideTo: function(index) {
                mainIndex=index;
                clearTimeout(index_inter);
                var len = $('.js-index-tab li').length;
                if (index >= len) {
                    index = 0;
                }
                videoSlide.index = index;
                var obj = $('.js-index-tab li').eq(index);
                var tab= $(".jp-video").eq(index);
                var src = $(obj).data('src');
                var poster = $(obj).data('poster');
                // mainPlayer.setMedia(src);
                mainPlayer[index].jPlayer("play").jPlayer("pauseOthers");
                $(".jp-loading").hide();
                $(".jp-error").hide();
                // $('.banner-bg').attr('src', poster);
                $('.banner-bg-next').attr('src', poster);
                $('.banner-bg').addClass('fadeout');
                index_inter = setTimeout(function() {
                    $('.banner-bg').attr('src', poster).removeClass('fadeout');
                    if ($(".banner-bg").attr('src') == '') {
                        $('.banner-bg').attr('src', '__PUBLIC__/Home/images/match_bg.jpg')
                    }
                }, 500);

                $(obj).addClass('active').siblings().removeClass('active');
                $(tab).show().siblings().hide();
            }
        }
         $('.jp-jplayer').each(function(){
            mainPlayer.push($(this).initPlayer({
                ended: function() {
                    videoSlide.next();
                }
            }))
        });
        setTimeout(function() {
            var top = $('.banner-video').offset().top;
            var height = $('.banner-video').height();
            var s_top = $(document.body).scrollTop();
            if (s_top < top + height - 100) {
                if (window.preventIndex) return false;
                videoSlide.slideTo(videoSlide.index);
            }
            indexScrollPlay();
        }, 500);

        function indexScrollPlay() {
            var top = $('.banner-video').offset().top;
            var height = $('.banner-video').height();
            $(document).on('scroll', function() {
                var s_top = $(document.body).scrollTop();
                if (s_top > top + height - 100) {
                    mainPlayer[mainIndex].jPlayer("pause").jPlayer("pauseOthers");
                } else if (s_top <= top) {
                    if (window.preventIndex) return false;
                    mainPlayer[mainIndex].jPlayer("play");
                }
            });
        }
        $('.js-index-tab li').on('click', function() {
            var index = $(this).index();
            videoSlide.slideTo(index);
            $(".jp-loading").hide();
            $(".jp-error").hide();
        });
    });
    </script>
</block>